<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>上车点载客点展示</title>

    <link
      rel="stylesheet"
      href="./css/mystyle.css"
      media="screen"
      type="text/css"
    />
    <!-- foot-awesome -->
    <link
      href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"
      rel="stylesheet"
      type="text/css"
    />

    <!-- 引入jquery -->
    <script
      src="http://code.jquery.com/jquery-1.11.0.min.js"
      type="text/javascript"
    ></script>

    <!-- 引入GeoUtils,用于圆形范围搜索 -->
    <script src="./js/GeoUtils.js" type="text/javascript"></script>

    <!-- 引入papaparse,用于csv文件读取 -->
    <script src="./js/papaparse.min.js" type="text/javascript"></script>

    <!--引入sweetalert提示框-->
    <link href="./css/sweetalert.css" rel="stylesheet" type="text/css" />
    <script src="./js/sweetalert.min.js" type="text/javascript"></script>

    <!-- 引入百度API -->
    <script
      src="http://api.map.baidu.com/api?v=2.0&ak=de5YPxAK8vlWfDn7wlO9I3u2iNzkoZul"
      type="text/javascript"
    ></script>
    <!-- <script
      src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"
      type="text/javascript"
    ></script> -->

    <!-- 地图和地图嵌入物 -->
    <style type="text/css">
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
      }
      #up-map-div {
        top: 10px;
        left: 30px;
        position: absolute;
        z-index: 9999;
      }
      #up-map-div::-webkit-scrollbar {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="allmap"></div>
    <div id="up-map-div" style="height:600px;overflow:auto">
      <ul class="menu">
        <li class="list">
          <a href="#" id="version">版本</a>
          <ul class="items">
            <li>
              <a
                href="javascript:void(0);"
                onclick="versionChoose(this)"
                version_display="GPS"
                op="0"
                >GPS</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="versionChoose(this)"
                version_display="CLICK"
                op="1"
                >CLICK</a
              >
            </li>
          </ul>
        </li>
        <li class="list">
          <a id="user" href="#">使用者</a>
          <ul class="items">
            <li>
              <a
                href="javascript:void(0);"
                onclick="userChoose(this)"
                user_display="出租车司机"
                color="blue"
                radius="1000"
                way="driving"
                alert="载客点"
                >出租车司机</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="userChoose(this)"
                user_display="乘客"
                color="red"
                radius="200"
                way="walking"
                alert="上车点"
                >乘客</a
              >
            </li>
          </ul>
        </li>

        <li class="list">
          <a href="#" id="week">星期</a>
          <ul class="items">
            <li>
              <a
                href="javascript:void(0);"
                onclick="weekChoose(this)"
                week_display="星期一"
                week="1"
                >星期一</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="weekChoose(this)"
                week_display="星期二"
                week="2"
                >星期二</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="weekChoose(this)"
                week_display="星期三"
                week="2"
                >星期三</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="weekChoose(this)"
                week_display="星期四"
                week="2"
                >星期四</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="weekChoose(this)"
                week_display="星期五"
                week="2"
                >星期五</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="weekChoose(this)"
                week_display="星期六"
                week="2"
                >星期六</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="weekChoose(this)"
                week_display="星期天"
                week="2"
                >星期天</a
              >
            </li>
          </ul>
        </li>

        <li class="list">
          <a id="time_period" href="#">时间段</a>
          <ul class="items" id="select">
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="00-00~01-00"
                time_display="0：00~1：00"
                >0：00~1：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="01-00~02-00"
                time_display="1：00~2：00"
                >1：00~2：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="02-00~03-00"
                time_display="2：00~3：00"
                >2：00~3：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="03-00~04-00"
                time_display="3：00~4：00"
                >3：00~4：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="04-00~05-00"
                time_display="4：00~5：00"
                >4：00~5：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="05-00~06-00"
                time_display="5：00~6：00"
                >5：00~6：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="06-00~07-00"
                time_display="6：00~7：00"
                >6：00~7：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="07-00~08-00"
                time_display="7：00~8：00"
                >7：00~8：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="08-00~09-00"
                time_display="8：00~9：00"
                >8：00~9：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="09-00~10-00"
                time_display="9：00~10：00"
                >9：00~10：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="10-00~11-00"
                time_display="10：00~11：00"
                >10：00~11：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="11-00~12-00"
                time_display="11：00~12：00"
                >11：00~12：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="12-00~13-00"
                time_display="12：00~13：00"
                >12：00~13：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="13-00~14-00"
                time_display="13：00~14：00"
                >13：00~14：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="14-00~15-00"
                time_display="14：00~15：00"
                >14：00~15：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="15-00~16-00"
                time_display="15：00~16：00"
                >15：00~16：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="16-00~17-00"
                time_display="16：00~17：00"
                >16：00~17：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="17-00~18-00"
                time_display="17：00~18：00"
                >17：00~18：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="18-00~19-00"
                time_display="18：00~19：00"
                >18：00~19：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="19-00~20-00"
                time_display="19：00~20：00"
                >19：00~20：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="20-00~21-00"
                time_display="20：00~21：00"
                >20：00~21：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="21-00~22-00"
                time_display="21：00~22：00"
                >21：00~22：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="22-00~23-00"
                time_display="22：00~23：00"
                >22：00~23：00</a
              >
            </li>
            <li>
              <a
                href="javascript:void(0);"
                onclick="timeChoose(this)"
                time="23-00~00-00"
                time_display="23：00~00：00"
                >23：00~00：00</a
              >
            </li>
          </ul>
        </li>
        <a
          class="btn btn-medium btn-blue btn-radius"
          href="javascript:void(0);"
          onclick="reset(this)"
          >重置</a
        >
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap", { enableMapClick: false }); // 创建Map实例
  var pointCenter = new BMap.Point(109.49931, 36.602499); //视图中心点
  map.centerAndZoom(pointCenter, 15);
  map.enableScrollWheelZoom();
  var point2s = []; //储存经纬度信息的数组

  //版本选择函数
  var opString = "1";
  function versionChoose(objInfo) {
    var version_display = $(objInfo).attr("version_display");
    $("#version").text(version_display);
    opString = $(objInfo).attr("op");
    opInt = parseInt(opString, 10);
    if (opInt == 1) {
      map.panTo(new BMap.Point(pointCenter.lng, pointCenter.lat)); //更新中心点
      map.addEventListener("click", showCircleAndMark); //为画圆函数添加鼠标监听事件
    } else if (opInt == 0) {
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function(r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            map.panTo(new BMap.Point(r.point.lng, r.point.lat)); //更新中心点
            swal("您的位置：" + r.point.lng + "," + r.point.lat, "", "success");
            showCircleAndMark(r);
          } else {
            swal("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    }
  }

  //使用者选择
  var radiusString = "200";
  var color = "grey";
  var alert = "上车点/载客点";
  var way = "walking";
  function userChoose(objInfo) {
    map.clearOverlays();
    var user_display = $(objInfo).attr("user_display");
    $("#user").text(user_display);
    radiusString = $(objInfo).attr("radius");
    color = $(objInfo).attr("color");
    alert = $(objInfo).attr("alert");
    way = $(objInfo).attr("way");
  }

  //星期选择
  var week = "1";
  var time = "07-30~08-00";
  function weekChoose(objInfo) {
    map.clearOverlays();
    week = $(objInfo).attr("week");
    var week_display = $(objInfo).attr("week_display"); //显示的星期信息
    $("#week").text(week_display);
  }
  //时间段选择
  function timeChoose(objInfo) {
    time = $(objInfo).attr("time"); //文件名
    var time_display = $(objInfo).attr("time_display"); //显示的时间
    $("#time_period").text(time_display);
    readCSV();
  }
  //读csv
  function readCSV() {
    map.clearOverlays();
    point2s.length = 0;
    filename = "data/" + "week_" + week + "/time" + " " + time + ".csv";
    Papa.parse(filename, {
      download: true,
      complete: function(results) {
        var data = results.data;
        for (var i = 1, _l = data.length - 1; i < _l; i++) {
          var item = data[i];
          var a = new BMap.Point(item[1], item[0]);
          point2s.push(a);
          point2s.push(item[2]);
        }
      }
    });
  }
  //画出圆形搜索范围和标记
  function showCircleAndMark(e) {
    var radiusInt = parseInt(radiusString, 10);
    map.clearOverlays();
    var myPoint = new BMap.Point(e.point.lng, e.point.lat); //初始化一个圆形搜索范围对象
    var circle = new BMap.Circle(myPoint, radiusInt, {
      fillColor: color,
      strokeWeight: 1,
      fillOpacity: 0.1,
      strokeOpacity: 0.1
    });
    map.addOverlay(circle); //画出圆形范围
    var count = 0;
    for (var i = 0; i < point2s.length / 2; i++) {
      //判断属于圆形范围的点
      var point = point2s[2 * i];

      if (BMapLib.GeoUtils.isPointInCircle(point, circle)) {
        // var marker = new BMap.Marker(point); // 创建标注
        var weight = point2s[2 * i + 1];
        console.log(weight);
        if (weight == 4) {
          markerAndWayChoose("./img/marker_pink.png", way, weight);
        } else if (weight == 3) {
          markerAndWayChoose("./img/marker_purple.png", way, weight);
        } else if (weight == 2) {
          markerAndWayChoose("./img/marker_red.png", way, weight);
        } else if (weight == 1) {
          markerAndWayChoose("./img/marker_blue.png", way, weight);
        } else if (weight == 0) {
          markerAndWayChoose("./img/marker_green.png", way, weight);
        }
      }
      function markerAndWayChoose(img, way, weight) {
        var myIcon = new BMap.Icon(img, new BMap.Size(19, 25));
        var marker = new BMap.Marker(point, { icon: myIcon });
        var opts = {
          title:
            '<span style="font-size:18px;color:#0A8021">推荐指数</span>'
        };
        var infoWindow = new BMap.InfoWindow(
          "<div style='line-height:1.8em;font-family:YouYuan;font-size:16px;'>" + weight + "</div>",
          opts
        ); // 创建信息窗口对象，引号里可以书写任意的html语句。
        marker.addEventListener("mouseover", function() {
          this.openInfoWindow(infoWindow);
        });
        map.addOverlay(marker); // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //将标注修改为动态标注
        if (way == "walking") {
          walkingRouteSearch(myPoint, point);
        } else if (way == "driving") {
          drivingRouteSearch(myPoint, point);
        }
        count++;
      }
    }
    if (count == 0) {
      swal("该区域内暂无推荐" + alert, "", "error");
    } else {
      swal("该区域有" + count + "个推荐" + alert, "", "success");
    }
  }

  //规划步行路线
  function walkingRouteSearch(start, end) {
    //规划路线
    var walking = new BMap.WalkingRoute(map, {
      renderOptions: { map: map, autoViewport: true },
      onPolylinesSet: function(routes) {
        searchRoute = routes[1].getPolyline(); //导航路线
        map.addOverlay(searchRoute);
      },
      onMarkersSet: function(routes) {
        map.removeOverlay(routes[1].marker); //删除终点图标
      }
    });
    walking.search(start, end);
  }

  //规划驾车路线
  function drivingRouteSearch(start, end) {
    //规划路线
    var driving = new BMap.DrivingRoute(map, {
      renderOptions: { map: map, autoViewport: true },
      onPolylinesSet: function(routes) {
        searchRoute = routes[1].getPolyline(); //导航路线
        map.addOverlay(searchRoute);
      },
      onMarkersSet: function(routes) {
        map.removeOverlay(routes[1].marker); //删除终点图标
      }
    });
    driving.search(start, end);
  }
  //重置
  function reset(objInfo) {
    map.clearOverlays();
    map.panTo(new BMap.Point(109.49931, 36.602499)); //更新中心点
    opString = "1";
    radiusString = "200";
    color = "grey";
    week = "1";
    time = "00-00~01-00";
    point2s.length = 0;
    $("#version").text("版本");
    $("#user").text("使用者");
    $("#week").text("星期");
    $("#time_period").text("时间段");
  }
</script>

<!-- 下拉框js -->
<script src="./js/box.js" type="text/javascript"></script>
